{{extend './base.html'}}
{{block 'title'}}
登录
{{/block}}
{{block 'style'}}
<style>
    .loginForm {
        padding: 20px;
        width: 500px;
        margin: 0 auto;
        border: 1px solid #c6c8ca;
    }

    .loginForm button {
        width: 100%;
    }

    .row {
        margin-top: 100px;
    }

    a:hover {
        text-decoration: none;
    }
</style>
{{/block}}
{{block 'content'}}
<div class="container">
    <div class="row">
        <form class="loginForm" method="post" autocomplete="off">
            <div class="form-group">
                <label for="inputUser">用户名</label>
                <input type="text" class="form-control" name="username" aria-describedby="emailHelp" id="inputUser">
            </div>
            <div class="form-group">
                <label for="inputPassword">密码</label>
                <input type="password" class="form-control" id="inputPassword" name="password">
            </div>
            <button type="button" class="btn btn-primary" id="login-btn">登录</button>
            <div class="form-group" style="margin-top:1rem;margin-bottom: 0;">
                <a href="/user/register" class="register">没有账号?点击注册</a>
            </div>
        </form>
    </div>
</div>
{{/block}}
{{block 'js'}}
<script type="text/javascript">
    $('#login-btn').click(function () {
        const username = $('#inputUser').val();
        const password = $('#inputPassword').val();
        if (!username || !password) {
            cocoMessage.warning("用户名或密码不能为空");
        } else {
            $.ajax({
                url: '/user/login',
                type: 'POST',
                data: {username, password},
                dataType: 'json',
                success: function (ret) {
                    if (ret.err_code === 0) {
                        window.location = '/';
                    } else {
                        cocoMessage.warning(ret.msg);
                    }
                }
            })
        }
    })
</script>
{{/block}}
